<template>
  <div class="blogdetail-container" v-if="blog?.title">
    <h1>{{ blog.title }}</h1>
    <ul class="blog-info">
      <li>{{ `日期:${blog.createDate}` }}</li>
      <li>{{ `浏览${blog.scanNumber}` }}</li>
      <li>
        <a href="#data-form-container">{{ `评论${blog.commentNumber}` }}</a>
      </li>
      <li>
        <router-link
          :to="{
            name: 'CategoryBlog',
            params: {
              categoryId: blog?.category?.id || -1,
            },
          }"
        >
          {{ blog?.category?.name || "" }}
        </router-link>
      </li>
    </ul>
    <div class="blog-content markdown-body" v-html="blog.htmlContent"></div>
  </div>
</template>

<script>
import "@/styles/markdown.css";
import "highlight.js/styles/github.css";
export default {
  name: "BlogDetaile",
  props: {
    blog: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";
.blogdetail-container {
  .blog-info {
    color: @gray;
    display: flex;
    justify-content: flex-start;
    gap: 18px;
  }
  .blog-content {
    margin: 20px 0;
  }
}
</style>
